<template>
  <div>
    <div class="create-state">
      <div class="create-state-title">
        <span class="state">创作动态</span>
        <span class="center" @click="goWriting">
          <span class="iconfont icon-write">&#xe8ad;</span>
          <span>创作中心</span>
        </span>
      </div>
    </div>
    <vue-seamless-scroll
      :data="list"
      class="scroll-container seamless-scroll"
    >
      <div class="flex-row row-data" v-for="(item,i) in list.slice(0,10)" :key="i">
        <span class="row-1 row-nomal" >{{ item.authorName }}</span>
        <span class="row-1 row-nomal" style="fontWeight:700">发表了</span>
        <span class="row-2 row-nomal hover-green" @click="goArticle(item.artId)">{{ item.title }}</span>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import {Message} from 'element-ui'
export default {
  name: "Scroll",
  props:['list'],
  methods: {
    goWriting() {
      if (this.$cookies.get(this.$api.TOKENKEY)) {
        let link = this.$router.resolve({
          path: "/writing",
        });
        window.open(link.href, "_blank");
      } else {
        Message({
          message: "未登录或者登录状态已过期，清重新登录",
          type: "error",
          duration: 1000,
        });
      }
    },
    goArticle(artId){
      let link = this.$router.resolve({
        path: "/article",
        query: { artId: artId },
      });
      window.open(link.href, "_blank");
    },
  },
};
</script>

<style scoped lang="less">
.create-state {
  .hover-green {
    cursor: pointer;
    &:hover {
      color: @themeColor;
    }
  }
  .create-state-title {
    display: flex;
    border-bottom: 1px solid #d7d7d7;
    justify-content: space-between;
    padding-bottom: 10px;
    .state {
      padding-left: 10px;
      font-size: 18px;
    }
    .center {
      padding-right: 10px;
      font-size: 18px;
      cursor: pointer;
      &:hover {
        color: @themeColor;
      }
      .icon-write {
        font-size: 20px;
        color: @themeColor;
        vertical-align: bottom;
      }
    }
  }
}
.seamless-scroll {
  height: 250px;
  padding-top: 10px;
  margin-top: 20px;
  overflow: hidden;
  .row-data {
    margin-top: 10px;
  }
}
</style>
